<template>
  <div class="home">
    <div class="chatWindow">
      <div class="chatInfo">
        <div class="infoBox">
          <svg class="chatIco" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
            <path
              d="M31.71,15.09A8.09,8.09,0,0,0,22.34,4.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,4.3,20.9,8,8,0,0,0,5,27.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,31.71,15.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,19.68,31.91ZM6.8,26.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V24.8a.09.09,0,0,1,0,.08L15,28.6A6,6,0,0,1,6.8,26.41ZM5.12,12.53A6,6,0,0,1,8.28,9.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L13.85,24.4a.14.14,0,0,1-.09,0L7.32,20.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52,2.69-1.55a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V18.56A1.06,1.06,0,0,0,27.25,17.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V11.2a.09.09,0,0,1,0-.09L21,7.4a6,6,0,0,1,8.91,6.21ZM13.08,19.15l-2.7-1.55a.14.14,0,0,1-.05-.08V10.1a6,6,0,0,1,9.84-4.61L20,5.6,13.61,9.28a1,1,0,0,0-.53.91ZM14.54,16,18,14l3.47,2v4L18,22l-3.47-2Z"
            />
          </svg>
          <p>ChatGPT</p>
        </div>
        <div class="btnSec">
          <span>当前产出数量为{{actualNum}}</span>
          <Button class="output-quantity" type="primary" @click="changeTokenNum">产出数量</Button>
          <Button class="testBtn" @click="testToken">测试Token</Button>
          <Button type="warning" @click="replaceToken">更换Token</Button>
        </div>
        <div class="mobel-sec">
          <span @click='changeTokenNum'>当前产出数量为{{actualNum}}</span>
          <Dropdown trigger="click" style="margin-left: 20px" class="mobel" @on-click="mobelOption">
          <a href="javascript:void(0)">
            配置菜单
            <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list"
          >
            <DropdownItem @click='changeTokenNum' name="产出数量">产出数量</DropdownItem>
            <DropdownItem @click='testToken' name="测试Token">测试Token</DropdownItem>
            <DropdownItem @click='replaceToken' name="更换Token">更换Token</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        </div>
      </div>
      <div class="chatBox" ref="sc">
        <div v-for="(item,index) in totalData" :key="index">
          <div class="send" v-if="item.creator=='me'">
            <div class="reply-details">
              <p>{{item.text}}</p>
            </div>
            <div class="send-ico">Me</div>
          </div>
          <div class="Reply" v-else>
            <svg class="Reply-Ico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
              <path
                d="M31.71,15.09A8.09,8.09,0,0,0,22.34,4.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,4.3,20.9,8,8,0,0,0,5,27.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,31.71,15.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,19.68,31.91ZM6.8,26.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V24.8a.09.09,0,0,1,0,.08L15,28.6A6,6,0,0,1,6.8,26.41ZM5.12,12.53A6,6,0,0,1,8.28,9.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L13.85,24.4a.14.14,0,0,1-.09,0L7.32,20.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52,2.69-1.55a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V18.56A1.06,1.06,0,0,0,27.25,17.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V11.2a.09.09,0,0,1,0-.09L21,7.4a6,6,0,0,1,8.91,6.21ZM13.08,19.15l-2.7-1.55a.14.14,0,0,1-.05-.08V10.1a6,6,0,0,1,9.84-4.61L20,5.6,13.61,9.28a1,1,0,0,0-.53.91ZM14.54,16,18,14l3.47,2v4L18,22l-3.47-2Z"
              />
            </svg>
            <Row v-if="item.state=='padding'">
              <Col class="demo-spin-col" span="8">
                <Spin fix>
                  <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
                  <div></div>
                </Spin>
              </Col>
            </Row>
            <div v-else class="reply-details">
              <p>{{ item.text}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="sendBox">
        <div class="input-Btn">
          <Input class="Input" v-model="sendValue" placeholder="在这里输入消息吧" @on-enter="send" />
          <Button @click="send">发送</Button>
        </div>
      </div>
    </div>
    <Modal v-model="hidden" title="更改产出数量" @on-ok="TokenNumber">
      <Alert show-icon>
        注意
        <span
          slot="desc"
        >Token默认为7,产出值越多消耗的Token值越多，请自己估计当前问答的Token数量，英文字符的Token占用为1个，中文字符占用两个，如果使用作者的Token请节省使用，因为当Token使用完毕时，OpenAI将不会回复</span>
      </Alert>
      <Slider class="slider" v-model="tokenNum" show-input :min="1" :max="2048"></Slider>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sendValue: "",
      actualNum: 7,
      tokenNum: 7,
      totalData: [
        {
          creator: "OpenAI",
          text:
            "你好，我是OpenAI机器人，请开始问我问题吧"
        }
      ],
      hidden: false
    };
  },
  beforeRouteEnter: (to, from, next) => {
    if (!localStorage.Authorization && !localStorage.notToken) {
      next(vm => {
        vm.$Message.warning("当前没有Token,跳转到Token配置");
        vm.$router.push("/addApi");
      });
    } else {
      next(vm => {
        if (from.path == "/") {
          vm.$Message.success("已使用上次配置的token进入首页");
        }
      });
    }
  },
  created() { 
    this.$Notice.open({
                    title: '通知',
                    desc: '请控制好Token，当Token用完后，机器人将不会再回复，如果产出字数过少，请调整产出数量',
                    duration: 4.5
                });
  },
  methods: {
    mobelOption(a) { 
      switch (a) {
        case '产出数量':
          this.changeTokenNum()
          break;
        case '测试Token':
          this.testToken()
          break;
        case '更换Token':
          this.replaceToken()
          break;
      
        default:
          break;
      }
    },
    send() {
      if (this.sendValue.replaceAll(" ", "") == "") {
        this.$Message.warning("没有输入内容");
        return;
      }
      this.totalData.push({ creator: "me", text: this.sendValue });
      this.totalData.push({ creator: "OpenAI", text: "", state: "padding" });
      this.api.completions
        .question(this.sendValue, this.actualNum)
        .then(value => {
          this.totalData.pop();
          this.totalData.push({
            creator: "OpenAi",
            text: value.data.choices[0].text
          });
        });
      this.sendValue = "";
    },
    replaceToken() {
      this.$router.push("/addApi");
    },
    testToken() {
      this.$Message.loading({
        content: "正在验证Token是否可用",
        duration: 0
      });
      this.api.completions
        .testToken()
        .then(res => {
          this.$Message.destroy();
          this.$Message.success("Token验证成功");
        })
        .catch(err => {
          localStorage.clear();
          this.$Message.destroy();
          this.$Message.error("Token验证失败,请重试");
        });
    },
    TokenNumber() {
      this.actualNum = this.tokenNum;
    },
    changeTokenNum() {
      this.hidden = true;
    },
    handleScrollBottom() {
      this.$nextTick(() => {
        let scrollElem = this.$refs.sc;
        scrollElem.scrollTo({ top: scrollElem .scrollHeight, behavior: 'smooth' });
      });
    }
  },
  watch: {
    'totalData': {
      handler() { 
        this.handleScrollBottom()
      }
    }
  }
};
</script>
<style lang="less" scoped>
//pc端样式
::v-deep .ivu-slider {
  width: 70%;
  margin: auto;
  margin-top: 40px;
}
@media (min-width: 1200px) {
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .demo-spin-col {
    height: 35px;
    width: 100px;
    position: relative;
    // border: 1px solid #eee;
  }
  .home {
    width: 1200px;
    height: 100vh;
    margin: auto;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
  .chatWindow {
    width: 1200px;
    height: 100vh;
    background-color: #fff;
    margin: auto;
    box-shadow: 1rem 1rem 14rem 0rem;
    .chatInfo {
      width: 100%;
      height: 80px;
      // background-color: aqua;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 20px;
      border-bottom: 1px solid rgb(225, 224, 224);
      .mobel-sec{
        display: none;
      }
      .infoBox {
        display: flex;
        align-items: center;
      }
      .chatIco {
        width: 40px;
        height: 40px;
      }
      p {
        font-size: 17px;
        font-weight: 600;
        margin-left: 10px;
        color: #000;
      }
    }
    .btnSec {
      span {
        margin-right: 10px;
        font-weight: 600;
        color: rgb(189, 0, 0);
      }
      .testBtn {
        margin-right: 10px;
      }
      .output-quantity {
        margin-right: 10px;
      }
    }
    .chatBox {
      width: 100%;
      height: calc(100vh - 160px);
      overflow-y: scroll;
      padding-bottom: 10px;
      .Reply {
        box-sizing: border-box;
        padding-left: 20px;
        padding-top: 10px;
        display: flex;
        .Reply-Ico {
          width: 30px;
          margin-right: 20px;
          height: 30px;
        }
        .reply-details {
          color: #000;
          max-width: 60%;
          background-color: rgb(223, 223, 223);
          box-sizing: border-box;
          padding: 10px;
          border-radius: 10px;
          p {
            white-space: pre-wrap;
            word-break: break-all;
            user-select: text;
          }
        }
      }
      .send {
        box-sizing: border-box;
        padding-right: 20px;
        padding-top: 10px;
        display: flex;
        justify-content: end;

        .send-ico {
          width: 30px;
          height: 30px;
          color: rgb(255, 255, 255);
          font-weight: 600;
          border-radius: 50%;
          text-align: center;
          line-height: 30px;
          background-color: #000;
          margin-left: 20px;
        }
        .reply-details {
          color: #fff;
          max-width: 60%;
          background-color: rgb(83, 127, 238);
          box-sizing: border-box;
          padding: 10px;
          border-radius: 10px;
          p {
            white-space: break-word;
            word-break: break-all;
          }
        }
      }
    }
    .sendBox {
      width: 100%;
      height: 80px;
      box-sizing: border-box;
      border-top: 1px solid rgb(225, 224, 224);
      .input-Btn {
        width: 90%;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        .Input {
          width: 70%;
        }
        button {
          margin-left: 10px;
        }
      }
    }
  }
}
//平板样式
@media (max-width: 1200px) and (min-width: 750px) {
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .demo-spin-col {
    height: 35px;
    width: 100px;
    position: relative;
    // border: 1px solid #eee;
  }
  .home {
    width: 100vw;
    height: 100vh;
    margin: auto;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
  .chatWindow {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    margin: auto;
    box-shadow: 1rem 1rem 14rem 0rem;
    .chatInfo {
      width: 100%;
      height: 80px;
      // background-color: aqua;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 20px;
      border-bottom: 1px solid rgb(225, 224, 224);
      .mobel-sec{
        display: none;
      }
      .infoBox {
        display: flex;
        align-items: center;
      }
      .chatIco {
        width: 40px;
        height: 40px;
      }
      p {
        font-size: 17px;
        font-weight: 600;
        margin-left: 10px;
        color: #000;
      }
    }
    .btnSec {
      span {
        margin-right: 10px;
        font-weight: 600;
        color: rgb(189, 0, 0);
      }
      .testBtn {
        margin-right: 10px;
      }
      .output-quantity {
        margin-right: 10px;
      }
    }
    .chatBox {
      width: 100%;
      height: calc(100vh - 160px);
      overflow-y: scroll;
      padding-bottom: 10px;
      .Reply {
        box-sizing: border-box;
        padding-left: 20px;
        padding-top: 10px;
        display: flex;
        .Reply-Ico {
          width: 30px;
          margin-right: 20px;
          height: 30px;
        }
        .reply-details {
          color: #000;
          max-width: 60%;
          background-color: rgb(223, 223, 223);
          box-sizing: border-box;
          padding: 10px;
          border-radius: 10px;
          p {
            white-space: pre-wrap;
            word-break: break-all;
            user-select: text;
          }
        }
      }
      .send {
        box-sizing: border-box;
        padding-right: 20px;
        padding-top: 10px;
        display: flex;
        justify-content: end;

        .send-ico {
          width: 30px;
          height: 30px;
          color: rgb(255, 255, 255);
          font-weight: 600;
          border-radius: 50%;
          text-align: center;
          line-height: 30px;
          background-color: #000;
          margin-left: 20px;
        }
        .reply-details {
          color: #fff;
          max-width: 60%;
          background-color: rgb(83, 127, 238);
          box-sizing: border-box;
          padding: 10px;
          border-radius: 10px;
          p {
            white-space: break-word;
            word-break: break-all;
          }
        }
      }
    }
    .sendBox {
      width: 100%;
      height: 80px;
      box-sizing: border-box;
      border-top: 1px solid rgb(225, 224, 224);
      .input-Btn {
        width: 90%;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        .Input {
          width: 70%;
        }
        button {
          margin-left: 10px;
        }
      }
    }
  }
}
//手机样式
@media (max-width: 750px) {
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .demo-spin-col {
    height: 35px;
    width: 100px;
    position: relative;
    // border: 1px solid #eee;
  }
  .home {
    width: 100vw;
    height: 100%;
    margin: auto;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
  .chatWindow {
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin: auto;
    box-shadow: 1rem 1rem 14rem 0rem;
    .chatInfo {
      width: 100%;
      height: 60px;
      // background-color: aqua;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 20px;
      border-bottom: 1px solid rgb(225, 224, 224);
      .infoBox {
        display: flex;
        align-items: center;
      }
      .chatIco {
        width: 30px;
        height: 30px;
      }
      p {
        font-size: 14px;
        font-weight: 600;
        margin-left: 10px;
        color: #000;
      }
    }
    .btnSec {
      display: none;
      span {
        margin-right: 10px;
        font-weight: 600;
        color: rgb(189, 0, 0);
      }
      .testBtn {
        margin-right: 10rem;
        width: 70rem;
        font-size: 10rem;
        text-align: center;
      }
      .output-quantity {
        margin-right: 10px;
      }
    }
    .mobel-sec{
      span{
        color: rgb(189, 0, 0);
      }
    }
    .chatBox {
      width: 100%;
      height: calc(100% - 120px);
      overflow-y: scroll; 
      padding-bottom: 10px;
      .Reply {
        box-sizing: border-box;
        padding-left: 20px;
        padding-top: 10px;
        display: flex;
        .Reply-Ico {
          width: 30px;
          margin-right: 20px;
          height: 30px;
        }
        .reply-details {
          color: #000;
          max-width: 60%;
          background-color: rgb(223, 223, 223);
          box-sizing: border-box;
          padding: 10px;
          border-radius: 10px;
          p {
            white-space: pre-wrap;
            word-break: break-all;
            user-select: text;
          }
        }
      }
      .send {
        box-sizing: border-box;
        padding-right: 20px;
        padding-top: 10px;
        display: flex;
        justify-content: end;

        .send-ico {
          width: 30px;
          height: 30px;
          color: rgb(255, 255, 255);
          font-weight: 600;
          border-radius: 50%;
          text-align: center;
          line-height: 30px;
          background-color: #000;
          margin-left: 20px;
        }
        .reply-details {
          color: #fff;
          max-width: 60%;
          background-color: rgb(83, 127, 238);
          box-sizing: border-box;
          padding: 10px;
          border-radius: 10px;
          p {
            white-space: break-word;
            word-break: break-all;
          }
        }
      }
    }
    .sendBox {
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      border-top: 1px solid rgb(225, 224, 224);
      .input-Btn {
        width: 90%;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        .Input {
          width: 70%;
        }
        button {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>


